<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3——背景图处理</title>
    <style>
        .box{
            float:left;
            margin-right:25px;
        }
        .background{
            width:100px;
            height:100px;
            background: url('images/border.png') no-repeat;
            border:15px solid #cecece;
            padding:15px;
        }

        /*背景图开始位置，从边框开始*/
        .border{
            background-origin: border-box;
        }
        /*背景图开始位置，从内边距开始，此项为默认值*/
        .padding{
            background-origin: padding-box;
        }
        /*背景图开始位置，从内容区域开始*/
        .content{
            background-origin: content-box;
        }

        /*背景图裁切，边框以外进行裁剪，此为默认值，相当于 overflow:hidden */
        .border_clip{
            background-clip: border-box;
        }
        /*背景图裁切，内边距以外进行裁剪*/
        .border_padding{
            background-clip: padding-box;
        }
        /*背景图裁切，内容区域以外进行裁剪*/
        .content_clip{
            background-clip: content-box;
        }

        /*设置背景图片大小，百分比，也可以是其他单位px、em等*/
        .size{
            background-size: 10% 10%;   /* x轴、y轴 */
        }
        /*设置背景图片大小，等比缩放至整个容器*/
        .cover{
            background-size: cover;
        }
        /*设置背景图片大小，等比缩放至某一边缘为止*/
        .contain{
            background-size: contain;
        }

        /* 同时设置多个背景图*/
        .many{
            background-color : #cecece;   /*设置背景色，只能设置一个背景色*/
            background-image: url('images/border.png'),url('images/star.png');
            background-repeat : no-repeat,no-repeat;   /*以逗号相隔设置多个背景图片的repeat*/
            background-position:left top,right bottom;   /*以逗号相隔设置多个背景图片的定位*/
            background-size : 30%,30%;   /*以逗号相隔设置多个背景图片的大小*/
            background-attachment:unset,unset;   /*以逗号相隔设置多个背景图片固定或滚动*/
            background-clip:border-box, content-box;   /*以逗号相隔设置多个背景图片的裁切*/
            background-origin:border-box, content-box;   /*以逗号相隔设置多个背景图片的原始位置*/
        }
    </style>
</head>
<body>
    <div class="box">
        <h4>从边框开始</h4>
        <div class="background border"></div>
    </div>
    <div class="box">
        <h4>从内边距开始，此项为默认值</h4>
        <div class="background padding"></div>
    </div>
    <div class="box">
        <h4>从内容区域开始</h4>
        <div class="background content"></div>
    </div>
    <div class="box">
        <h4>背景图裁切，边框以外进行裁剪</h4>
        <div class="background border_clip"></div>
    </div>
    <div class="box">
        <h4>背景图裁切，内边距以外进行裁剪</h4>
        <div class="background border_padding"></div>
    </div>
    <div class="box">
        <h4>背景图裁切，内容区域以外进行裁剪</h4>
        <div class="background content_clip"></div>
    </div>
    <div class="box">
        <h4>设置背景图片大小，百分比，也可以是其他单位px、em等</h4>
        <div class="background size"></div>
    </div>
    <div class="box">
        <h4>设置背景图片大小，等比缩放至整个容器</h4>
        <div class="background cover"></div>
    </div>
    <div class="box">
        <h4>设置背景图片大小，等比缩放至某一边缘为止</h4>
        <div class="background contain"></div>
    </div>
    <div class="box">
        <h4>同时设置多个背景图</h4>
        <div class="background many"></div>
    </div>
</body>
</html>